<template>
  <!-- 导航组 -->
  <view class="diy-navBar" :style="{ background: itemStyle.background, color: itemStyle.textColor }">
    <image class="diy-navBar-bg" mode="widthFix" src="/static/assets/diy_navbar_bg.png"></image>
    <image class="diy_navbar_des1" mode="widthFix" src="/static/assets/diy_navbar_des1.png"></image>
    <view class="data-list-wrap">
      <image class="diy_navbar_des2" mode="widthFix" src="/static/assets/diy_navbar_des2.png"></image>
      <!-- <view class="data-list" :class="[`avg-sm-${itemStyle.rowsNum}`]">
        <view class="item-nav" v-for="(dataItem, index) in dataList" :key="index">
          <view class="nav-to" @click="onLink(dataItem.link)">
            <view class="item-image">
              <image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
            </view>
            <view class="item-text onelist-hidden">{{ dataItem.text }}</view>
          </view>
        </view>
      </view> -->
      <view class="data-list" v-for="(row, index) in navArray" :key="index">
        <view class="data-item" v-for="item in row">
          <view class="nav-to" @click="onLink(item.link)">
            <view class="item-image">
              <image class="image2" v-if="item.text=='水吧'" mode="heightFix" :src="item.imgUrl"></image>
              <image class="image" v-else mode="widthFix" :src="item.imgUrl"></image>
            </view>
            <view class="item-text onelist-hidden">{{ item.text }}</view>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import mixin from '../mixin'

  export default {
    name: "NavBar",
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      dataList: Array
    },
    
    computed: {
      navArray() {
        let arr = [], subs = [], i = 0
        this.dataList.map(item => {
          if (subs.length < 3) {
            subs.push(item)
            arr[i] = subs
            if (subs.length == 3) {
              subs = []
              i++
            }
          }
        })
        return arr
      }
    },

    mixins: [mixin],

    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
      
    }

  }
</script>

<style lang="scss" scoped>
  .diy-navBar {
    position: relative;
  }
  .diy-navBar .data-list-wrap {
    position: absolute;
    top: 260rpx;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }
  .diy-navBar .data-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 30rpx;
    padding-bottom: 60rpx;
    background: url('/static/assets/diy_navbar_line.png') no-repeat center bottom;
    background-size: 720rpx 60rpx;
    margin-bottom: 40rpx;
    
    &::after {
      clear: both;
      content: " ";
      display: table;
    }
    &:last-child {
      background-image: url('/static/assets/diy_navbar_line_last.png');
      background-size: 750rpx 60rpx;
    }
  }
  .diy-navBar-bg {
    width: 100%;
  }
  .diy_navbar_des1 {
    width: 380rpx;
    position: absolute;
    top: 60rpx;
    right: 40rpx;
    
  }
  .diy_navbar_des2 {
    width: 260rpx;
    margin-bottom: 24rpx;
    margin-left: 30rpx;
  }
  .data-item {
    width: 230rpx;
    height: 230rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin: 0 30rpx;
    text-align: center;
    position: relative;
    overflow-y: hidden;
  
    .item-text {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 8rpx 20rpx;
      background-color: #fff;
      font-weight: bold;
      font-size: 32rpx;
    }
  
    .item-image {
      font-size: 0;
      display: block;
      width: 190rpx;
      height: 190rpx;
      position: relative;
    }
  
    .item-image .image {
      width: 170rpx;
      margin-top: 86rpx;
    }
    .item-image .image2 {
      height: 160rpx;
      margin-top: 50rpx;
    }
  }

  .item-nav {
    float: left;
    margin: 10px 0;
    text-align: center;

    .item-text {
      font-size: 26rpx;
    }

    .item-image {
      margin-bottom: 4px;
      font-size: 0;
    }

    .item-image .image {
      width: 88rpx;
      height: 88rpx;
    }

  }

  /* 分列布局 */

  .diy-navBar .avg-sm-3>.item-nav {
    width: 33.33333333%;
  }

  .diy-navBar .avg-sm-4>.item-nav {
    width: 25%;
  }

  .diy-navBar .avg-sm-5>.item-nav {
    width: 20%;
  }
</style>
